<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1>{{ mes }}</h1>
    <!-- 表单 -->
    <!-- v-bind: 简写 : -->
    <!-- v-on: 简写 @ -->
    <!-- <input type="text" :value="val" @input="handleInput"> -->
    <!-- {{ val }} -->

    <hr>
    <!--  v-model="值" 双向数据绑定  语法糖-->
    <h1> 1. 处理 type="text|email|number"</h1>
    <div>
      <!-- 修饰符 number 数字-->
      <!-- 修饰符 number 左右去除空格-->
      <!-- 修饰符 number 事件改为change-->
      <input type="text" v-model.number="val1">
      <input type="text" v-model.trim="val1">
      <input type="text" v-model.lazy="val1"> 
      {{ typeof val1 }}
    </div>

    <h1> 2. 处理 type="radio"</h1>
    <div>
      <input type="radio" value="篮球" v-model="radioValue">篮球
      <input type="radio" value="足球" v-model="radioValue">足球
      <input type="radio" value="排球" v-model="radioValue">排球
      <input type="radio" value="羽毛球" v-model="radioValue">羽毛球
      <input type="radio" value="乒乓球" v-model="radioValue">乒乓球
    </div>
    <div>
      {{ radioValue }}
    </div>


    <h1> 3. 处理 type="checkbox"</h1>
    <div>
      <input type="checkbox" value="篮球" v-model="checkboxValue">篮球
      <input type="checkbox" value="足球" v-model="checkboxValue">足球
      <input type="checkbox" value="排球" v-model="checkboxValue">排球
      <input type="checkbox" value="羽毛球" v-model="checkboxValue">羽毛球
      <input type="checkbox" value="乒乓球" v-model="checkboxValue">乒乓球
    </div>
    <div>
      {{ checkboxValue }}
    </div>


    <h1>4. 处理 select > option </h1>
    <div>
      <select name="" id="" v-model="selectValue">
        <option value="篮球">篮球</option>
        <option value="足球">足球</option>
        <option value="排球">排球</option>
        <option value="乒乓球">乒乓球</option>
        <option value="羽毛球">羽毛球</option>
      </select>
    </div>
    <div>{{ selectValue }}</div>
  </div>
</body>

</html>